<template>
    <PageTabelLayout>
        <template #pageHeader>
            <div class="my-header" v-if="headerShow">
                <div class="search-form" style="padding: 10px;box-sizing: border-box;">
                    <a-form size="small" :model="searchData" auto-label-width layout="inline">


                                <a-form-item label="计划日期:" label-col-flex="115px" :style="{width:'350px'}">
                                    <a-range-picker  popup-container="html"  v-model="searchData.time"  class="bacClass" @clear="pickerClear"/>
                                </a-form-item>


                                <a-form-item label="流转卡号:" label-col-flex="115px" :style="{width:'350px'}">
                                    <a-input placeholder="" allow-clear class="bacClass"  />
                                </a-form-item>


                                <a-form-item label="计划单号:" label-col-flex="115px" :style="{width:'350px'}">
                                    <a-input placeholder="" allow-clear class="bacClass" />
                                </a-form-item>


                                <a-form-item label="客户名称:" label-col-flex="115px" :style="{width:'350px'}">
                                    <a-input placeholder="" allow-clear class="bacClass" />
                                </a-form-item>


                    </a-form>
                    <a-form size="small" :model="searchData" auto-label-width layout="inline">


                                <a-form-item label="工段:" label-col-flex="115px" :style="{width:'350px'}">
                                    <a-input placeholder="" allow-clear class="bacClass" />
                                </a-form-item>


                                <a-form-item label="等待工序:" label-col-flex="115px" :style="{width:'350px'}">
                                    <a-input placeholder="" allow-clear class="bacClass" />
                                </a-form-item>


                                <a-form-item label="测试情况:" label-col-flex="115px" :style="{width:'350px'}">
                                    <a-select popup-container="html"  placeholder="" allow-clear  class="bacClass">
                                        <a-option value="未开始">未开始</a-option>
                                        <a-option value="已开始未结束">已开始未结束</a-option>
                                        <a-option value="已结束">已结束</a-option>
                                    </a-select>
                                </a-form-item>


                                <a-form-item label="流转卡完成情况:" label-col-flex="115px" :style="{width:'350px'}">
                                    <a-select popup-container="html"  placeholder="" allow-clear  class="bacClass">
                                        <a-option value="未开始">未开始</a-option>
                                        <a-option value="完成">完成</a-option>
                                        <a-option value="未完成">未完成</a-option>
                                    </a-select>
                                </a-form-item>




                                <a-form-item label="流转卡终止情况:" label-col-flex="115px" :style="{width:'350px'}">
                                    <a-select popup-container="html"  placeholder="" allow-clear  class="bacClass">
                                        <a-option value="全部">全部</a-option>
                                        <a-option value="已终止">已终止</a-option>
                                        <a-option value="未终止">未终止</a-option>
                                    </a-select>
                                </a-form-item>

                            <!-- <a-col :span="6">
                                <a-checkbox >整理工序已完成</a-checkbox>
                            </a-col> -->

                    </a-form>
                </div>
            </div>
            <div class="my-divisders">
                <a-divider orientation="center">
                    <icon-double-up v-if="headerShow" @click="changHeadShow(false)" :strokeWidth="2" :size="18" />
                    <icon-double-down v-else @click="changHeadShow(true)" :strokeWidth="2" :size="18" />
                </a-divider>
            </div>
            <div class="my-tool-bar" style="padding:0px 10px 10px 0px;box-sizing: border-box;">
                <Toolbar :items="['查询', '打印', '导出']" @select="selectHandler" @export="exportHandler"
                    @dyBoufei="dyBoufeiHandler" />
            </div>
        </template>
        <template #pageTabel>
            <div style="overflow-y: scroll;height: 100%;">
                <WidthPhyInfo :searchData="searchData"/>
                <WidthPhyWorkProce />
            </div>
        </template>
    </PageTabelLayout>
</template>

<script lang="ts">
import { onMounted, reactive, ref } from 'vue'
import PageTabelLayout from '@/components/pageTabelLayout.vue';

import emitter from "@/hooks/useEventBus";
import WidthPhyInfo from './widthPhyInfo.vue';
import WidthPhyWorkProce from './widthPhyWorkProce.vue';
export default {
    name: "widthPhyInfoDetailQuery",
    setup() {
        let headerShow = ref<boolean>(true);
        let changHeadShow = (boolVal: boolean) => {
            headerShow.value = boolVal;
            emitter.emit('window-change');
        };
        onMounted(() => {
            // 第一个页面需要在刚进入就调用一次  切换tap时也需要调用
            emitter.on("refresh-phyPushedInfoQuery", () => {
                emitter.emit('refresh-widthPhyWordProce');
                emitter.emit('refresh-widthPhyInfo');
            });
        });
        const selectHandler = () => {
            emitter.emit('refresh-widthPhyInfo',1);
         };
        const exportHandler = () => {
            emitter.emit('export-widthPhyWordProce');
        };
        const dyBoufeiHandler = () => {

        };
        const searchData = reactive({
            item:[]
        });
        const scrollbar = ref(true);

        const pickerClear = ()=>{
            searchData.item = []
        }
        return {
            pickerClear,
            selectHandler,
            exportHandler,
            dyBoufeiHandler,
            searchData,
            scrollbar,
            changHeadShow,
            headerShow
        };
    },
    components: { PageTabelLayout, WidthPhyInfo, WidthPhyWorkProce }
}
</script>

<style scoped>
.aInput {
    width: 270px;
    background: #fff;
    border: 1px solid #c9cdd3;
}
:deep(.arco-picker input){
    padding-left: 0 !important;
}
:deep(.arco-picker){
    padding-left: 0 !important;
}
:deep(.arco-picker-separator){
    padding: 0 !important;
}
</style>